import {useState} from 'react'

import './index.scss'
import Tabs from "../../../components/tabs";

const TAB_DATA = [
  {
    name: 'Aturan',
    tab: 0,
    apiKey: '',
  },
  {
    name: 'Award',
    tab: 1,
    apiKey: '',
  },
]

function GameKingRankRule() {
  const [activeTab, setActiveTab] = useState(TAB_DATA[0])

  const handleChange = d => {
    setActiveTab(d)
  }

  const closeRule = () => {
    window.location.href = "/layout/game-king-rank"
  }

  const toRecord = () => {
    window.location.href = "/layout/game-king-rank/record"
  }

  const renderRule = () => (
    <div className="rule">
      <div className="coin-diamond">
        <span className="diamond">1</span>
        <span>&nbsp;=&nbsp;</span>
        <span className="coin">1</span>
      </div>

      <div className="rule-content">

        <div className="rule-title">
          1. Stage ranking:
        </div>
        <ul>
          <li>
            The first stage: 04/25 00:00:00～23:59:59(Top 100 advance)
          </li>
          <li>
            The second stage: 04/26 00:00:00～23:59:59(Top 50 advance)
          </li>
          <li>
            The third stage: 04/27 00:00:00～04/28 23:59:59
            <p>(The first 10 users will receive the third stage reward)</p>
          </li>
        </ul>

        <div className="rule-title">
          2. Stage ranking:
        </div>

        <ul>
          <li>
            Participation requirements: Participants who have accumulated
            <p>10juta points before the 29th</p>
            <p>Time: 04/29 00:00:00</p>
            <p>(The top 10 users will win the grand prize of the final list)</p>
          </li>
        </ul>

        <div className="rule-title">
          3. Daily tasks
        </div>

        <table>
          <thead>
          <tr>
            <th>Grade</th>
            <th>Required points</th>
            <th>Award</th>
          </tr>
          </thead>

          <tbody>
          <tr>
            <td>LV1</td>
            <td>
              <div className="coin">10</div>
            </td>
            <td>
              <div className="gift gift-1">1 hari</div>
            </td>
          </tr>

          <tr>
            <td>LV2</td>
            <td>
              <div className="coin">50</div>
            </td>
            <td>
              <div className="gift gift-2">1 hari</div>
            </td>
          </tr>

          <tr>
            <td>LV3</td>
            <td>
              <div className="coin">100</div>
            </td>
            <td>
              <div className="gift gift-3">
                1 hari
              </div>
              <div className="gift gift-2">
                1 hari
              </div>
            </td>
          </tr>

          <tr>
            <td>LV4</td>
            <td>
              <div className="coin">200</div>
            </td>
            <td>
              <div className="gift gift-4">
                1 hari
              </div>
              <div className="gift gift-5">
                x20
              </div>
            </td>
          </tr>

          <tr>
            <td>LV5</td>
            <td>
              <div className="coin">200</div>
            </td>
            <td>
              <div className="gift gift-4">
                3 hari
              </div>
              <div className="gift gift-5">
                x50
              </div>
            </td>
          </tr>

          </tbody>
        </table>

        <div className="text">*Points will be reset and recalculated daily</div>

        <div className="rule-title">
          4. Daily ranking
        </div>

        <ul>
          <li>The top 5 users of the day will receive the following rewards</li>
        </ul>

        <table>
          <thead>
          <tr>
            <th>Grade</th>
            <th>Award</th>
          </tr>
          </thead>

          <tbody>
          <tr>
            <td>TOP1</td>
            <td>
              <div className="diamond">5,000</div>
            </td>
          </tr>
          <tr>
            <td>TOP2</td>
            <td>
              <div className="diamond">4,000</div>
            </td>
          </tr>
          <tr>
            <td>TOP3</td>
            <td>
              <div className="diamond">3,000</div>
            </td>
          </tr>
          <tr>
            <td>TOP4</td>
            <td>
              <div className="diamond">2,000</div>
            </td>
          </tr>
          <tr>
            <td>TOP5</td>
            <td>
              <div className="diamond">1,000</div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  )

  const renderAward = () => (<div className="award">
    <div className="title">Stage 3 Rewards</div>
    <table>
      <thead>
      <tr>
        <th>Ranking in the third stage</th>
        <th>Award</th>
      </tr>
      </thead>

      <tbody>
      <tr>
        <td>TOP1</td>
        <td>
          <div className="diamond">500,000</div>
        </td>
      </tr>
      <tr>
        <td>TOP2</td>
        <td>
          <div className="diamond">300,000</div>
        </td>
      </tr>
      <tr>
        <td>TOP3</td>
        <td>
          <div className="diamond">200,000</div>
        </td>
      </tr>
      <tr>
        <td>TOP4</td>
        <td>
          <div className="diamond">100,000</div>
        </td>
      </tr>
      <tr>
        <td>TOP5-7</td>
        <td>
          <div className="diamond">50,000</div>
        </td>
      </tr>
      <tr>
        <td>TOP8-10</td>
        <td>
          <div className="diamond">30,000</div>
        </td>
      </tr>
      </tbody>
    </table>

    <div className="title">Invitational Rewards</div>
    <table>
      <thead>
      <tr>
        <th>Invitational ranking</th>
        <th>Award</th>
      </tr>
      </thead>

      <tbody>
      <tr>
        <td>TOP1</td>
        <td>
          <div className="diamond">1,000,000</div>
        </td>
      </tr>
      <tr>
        <td>TOP2</td>
        <td>
          <div className="diamond">800,000</div>
        </td>
      </tr>
      <tr>
        <td>TOP3</td>
        <td>
          <div className="diamond">500,000</div>
        </td>
      </tr>
      <tr>
        <td>TOP4</td>
        <td>
          <div className="diamond">300,000</div>
        </td>
      </tr>
      <tr>
        <td>TOP5-7</td>
        <td>
          <div className="diamond">200,000</div>
        </td>
      </tr>
      <tr>
        <td>TOP8-10</td>
        <td>
          <div className="diamond">10,000</div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>)

  const tab = activeTab.tab
  return (
    <div className="GameKingRank-rule">
      <button className="return-btn" onClick={closeRule}>Return</button>
      <button className="record-btn" onClick={toRecord}>Reward record</button>

      <p className="time-msg">2022/04/25-2022/04/310</p>
      <Tabs data={TAB_DATA} onChange={handleChange} className="parent-tabs"/>
      <main>
        {tab === 0 ? renderRule() : renderAward()}
      </main>
      <div className="bg-bottom"/>

      {/*<p className="info">Hak penjelasan dipilihkan RABO LIVE</p>*/}
    </div>
  )
}

export default GameKingRankRule
